<template>
  <view class="container">
    <view class="content">
      <view class="contentbox">
        <z-tabs ref="tabs" class='tabs' :list="list" :current="data.current" @change="tabsChange"
                active-color="#000"></z-tabs>
        <!-- @transition="swiperTransition" @animationfinish="swiperAnimationfinish"  @change="swiperChange"-->
        <swiper :disable-touch="true" class="swiper"
                :style="{height:$isIos()?'calc(100vh - 138px)':'calc(100vh - 80px)'}" :current="data.current">
          <template v-for="(item, index) in list">
            <swiper-item class="swiper-item" :style="{height:$isIos()?'calc(100vh - 138px)':'calc(100vh - 80px)'}"
                         v-if="item.name">
              <scroll-view :style="{height:$isIos()?'calc(100vh - 138px)':'calc(100vh - 80px)'}" scroll-y="true"
                           :refresher-triggered="data.triggered" :refresher-threshold="100"
                           @refresherrefresh="onRefresh" @refresherrestore="onRestore"
                           @refresherabort="onAbort" @scrolltolower="scrolltolower">
                <view v-for="(items, indexs) in list[data.current].list" :key="index">
                  <view class="goodsbox">
                    <view class="titlebox">
                      <!-- <view class="titleboxl"><image :src="items.business.shop_head?items.business.shop_head:$store.state.logo" mode=""></image> {{items.business.name||$store.state.name}}</view>

                       -->

                      <view class="">
                        <uni-dateformat :date="items.created_at"></uni-dateformat>

                      </view>
                      <view class="titleboxr">{{ data.statelist[items.state] }}</view>
                    </view>
                    <view class="goods" v-for="itemss in items.goods">
                      <image :src="itemss.img" mode="aspectFill"></image>
                      <view class="right">
                        <view class="name textsl2">
                          {{ itemss.name }}
                        </view>
                        <view class="gg">
                          规格：{{ itemss.attributes }}
                        </view>
                        <!-- 	<view class="num">
                            数量：{{itemss.number}}
                          </view> -->
                        <view class="flex-box">
                          <view class="flex-left">
                            ￥{{ $toFiexd(items.money + items.coupon, 2) }}
                          </view>
                          <view class="flex-right">
                            X{{ itemss.number }}
                          </view>
                        </view>
                      </view>
                    </view>
                    <!-- 	<view class="titleboxs">
                        <view class="titleboxl">共 {{items.number}} 件商品</view>
                        <view class="titleboxr">运费￥{{$toFiexd(items.freight,2)}} <br> 商品总价￥{{$toFiexd(items.money + items.coupon ,2)}}</view>
                      </view> -->

                    <view class="bottombox">
                      <view style="display: flex;" v-if="items.state==0">
                        <view class="box1" @click="deleteProduct(items.order)">
                          取消订单
                        </view>
                        <view class="box2" @click="$goURl('/pages/order/createorder?id='+items.order)">
                          去付款
                        </view>
                      </view>
                      <view v-if="items.state!=2&&items.state!=5">
                        <view class="box3"
                              @click="$goURl('/pages/order/orderdetail?order='+items.order+'&state='+items.state)">
                          订单详情
                        </view>
                      </view>
                      <view class="" v-if="items.state==2 && items.take==0">
                        <view class="box3" @click="$goURl('/pages/order/logistics?order='+items.order)">
                          物流信息
                        </view>
                      </view>
                      <view v-if="(items.state==3||items.state==2||items.state==1||items.state==4)&&!items.reason">
                        <view class="box1"
                              @click="$goURl('/pages/order/applyfor?id='+items.order+'&state='+items.state)">
                          申请售后
                        </view>
                      </view>
                      <view v-if="items.state==2">
                        <view class="box3" @click="confirmReceipt(items.order)">
                          确认收货
                        </view>
                      </view>
                      <view v-if="items.state==3">
                        <view class="box3" @click="$goURl('/pages/order/evaluate?id='+items.order)">
                          去评价
                        </view>
                      </view>
                      <view v-if="items.state==5">
                        <view class="box2" @click="$goURl('/pages/order/refundDetails?id='+items.order)">
                          售后
                        </view>
                      </view>

                    </view>
                  </view>
                </view>
                <empty v-if="list[data.current].list.length == 0"></empty>
              </scroll-view>
            </swiper-item>
          </template>
        </swiper>
        <!-- <uni-load-more :status="data.loadmore"></uni-load-more> -->
      </view>
    </view>
  </view>
</template>
<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import {onBackPress, onLoad, onShow} from "@dcloudio/uni-app";

const {proxy} = getCurrentInstance();
let data = reactive({
  triggered: false,
  _freshing: false,

  statelist: ['待付款', '待发货', '待收货', '待评价', '已完成', '退款', '', '', '被取消'],
  loadmore: 'more',
  current: 0,
  state: 0,
  page: 0,
  size: 10,
  pages: 1,
})
let list = ref([
  {name: '全部',state:-1, list: []},
  {name: '待付款',state:0, list: []},
  {name: '待发货',state:1, list: []},
  {name: '待收货',state:2, list: []},
  {name: '待评价',state:3, list: []},
  {name: '已完成',state:4, list: []},
  {name: '退款',state:5, list: []},
  {name: '被取消',state:8, list: []}
])
let tabs = ref()
onLoad((option) => {
  console.log('页面onLoad', option)
  try {
    if (option.state >= 0) {
      data.current = option.state
    }
  } catch (option) {

  }

})
onShow(() => {
  console.log('页面onShow')
  data.page = 0
  data.pages = 1
  list.value[data.current].list = []
  init()
})
onBackPress((event) => {
  setTimeout(() => {
    uni.switchTab({
      url: '/pages/personal/index'
    })
  }, 300)
})
const stateCp=computed(() => {
  return list.value[data.current].state
})

function init() {
  data.loadmore = "loading"
  let states = data.current
  let orderlist = JSON.parse(JSON.stringify(list.value))
  if (data.page < data.pages) {
    data.page++
    proxy.$request({
      url: `api/order/?page=${data.page}&size=${data.size}&state=${ stateCp.value}`,
      method: 'get',
      data: {
        page: data.page,
        size: data.size
      },
      success: (res) => {
        console.log(res, "res")
        data.pages = Math.ceil(res.data.total / data.size)
        if (data.pages != data.page) {
          data.loadmore = "more"
        } else {
          data.loadmore = "nomore"
        }
        if (res.data.data) {
          res.data.data.forEach(item => {
            orderlist[states].list.push(item)
          })
        } else {
          data.loadmore = "none"
        }
        list.value = orderlist

      }
    })
  } else {
    data.loadmore = "nomore"
  }

}

//确认收货
function confirmReceipt(order) {
  uni.showModal({
    title: '提示',
    content: '是否确认收货?',
    success: function (res) {
      if (res.confirm) {
        proxy.$request({
          url: `api/confirmOrder/`,
          method: 'POST',
          data: {
            order: order
          },
          success: (reg) => {
            data.page = 0
            data.pages = 1
            list.value[data.current].list = []
            init()
            if (reg.errno == 0) {
              uni.showToast({
                icon: 'none',
                title: reg.errmsg
              })
            }
          }
        })
      } else {
        console.log('用户点击确定');
      }
    }
  })
}

// 取消订单
function deleteProduct(order) {
  uni.showModal({
    title: '提示',
    content: '是否取消该订单',
    success: function (res) {
      if (res.confirm) {
        proxy.$request({
          url: `api/order/`,
          method: 'DELETE',
          data: {
            order: order
          },
          success: (reg) => {
            data.page = 0
            data.pages = 1
            list.value[data.current].list = []
            init()
            if (reg.errno == 0) {
              uni.showToast({
                icon: 'none',
                title: reg.errmsg
              })
            }

          }
        })
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });

}

function showCity() {

}

function scrolltolower() {
  console.log('scrolltolower')
  init()
}

//tabs通知swiper切换
function tabsChange(index) {
  data.current = index;
  data.page = 0;
  data.pages = 1;
  data.state = stateCp.value;
  data.loadmore = "more"
  list.value[index].list = []
  init()
}




function onRefresh() {
  console.log('onRefresh')
  if (data._freshing) return;
  data._freshing = true;
  setTimeout(function () {
    data.triggered = false;
    data._freshing = false;
  }, 1000)
}

function onRestore() {
  data.triggered = 'restore'; // 需要重置
  console.log("onRestore");
}

function onAbort() {
  console.log("onAbort");
}

function confirm(e) {
  console.log('e', e.detail.value)
}

</script>


<style lang="scss" scoped>
page {
  background-color: #fff;
}


$nav-height: 30px;

.container {
  .input-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    // width: 500rpx;
    flex: 1;
    justify-content: space-between;
    background-color: #f8f8f8;
    height: $nav-height;
    border-radius: 15px;
    padding: 0 15px;
    padding-right: 0;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: $nav-height;
    overflow: hidden;

    .input-view-box {
      display: flex;

      .nav-bar-input {
        height: $nav-height;
        line-height: $nav-height;
        /* #ifdef APP-PLUS-NVUE */
        width: 370rpx;
        /* #endif */
        padding: 0 5px;
        font-size: 12px;
        background-color: #f8f8f8;
      }
    }

    .input-view-right {
      background-color: red;
      border-radius: $nav-height;
      padding: 0 20upx;
      color: aliceblue;
    }
  }

  .content {

    .contentbox {
      // padding: $padding;
      .swiper {
        .swiper-item {

          view {
            .goodsbox {
              border-bottom: 1upx solid #f5f5f5;
              padding: 36rpx 0;
              margin: 0 30rpx;

              .goods {
                display: flex;
                margin-bottom: 30upx;

                image {
                  width: 142rpx;
                  height: 142rpx;
                  border-radius: 16rpx;
                  margin-right: 30upx;
                  // background-color: aquamarine;
                }

                .right {
                  width: calc(100% - 140upx);

                  .name {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #2D2D2D;
                  }

                  .gg {
                    color: #999999;
                    font-size: 24upx;
                    margin: 20upx 0;
                  }

                  .num {
                    color: #999999;
                    font-size: 24upx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  }
                }
              }

              .titlebox {
                display: flex;
                justify-content: space-between;
                color: #333333;
                margin: 30upx 0;
                margin-top: 0;

                .titleboxl {
                  display: flex;
                  align-items: center;
                  font-size: 28upx;
                  font-weight: 500;
                  color: #333;

                  image {
                    width: 50upx;
                    height: 50upx;
                    margin-right: 20upx;
                    border-radius: 25upx;
                  }
                }

                .titleboxr {
                  font-weight: 500;
                  font-size: 26rpx;
                  color: #2D2D2D;
                }
              }

              .titleboxs {
                display: flex;
                justify-content: space-between;
                color: #333333;
                margin: 30upx 0;
                padding-top: 30upx;
                border-top: 1upx solid #f5f5f5;

                .titleboxl {
                  font-size: 24upx;
                  font-weight: 500;
                  color: #999999;
                }

                .titleboxr {
                  font-size: 28upx;
                  font-weight: bold;
                  color: #333;
                }
              }

              .bottombox {
                display: flex;
                justify-content: flex-end;
                flex-wrap: wrap;

                .box1 {
                  width: 128rpx;
                  height: 46rpx;
                  border-radius: 8rpx;
                  border: 1rpx solid #2D2D2D;
                  font-weight: 400;
                  font-size: 20rpx;
                  color: #2D2D2D;
                  text-align: center;
                  line-height: 46rpx;
                  margin-left: 12rpx;
                }

                .box2 {
                  width: 128rpx;
                  height: 48rpx;
                  background: #F63B29;
                  border-radius: 8rpx;
                  font-weight: 500;
                  font-size: 20rpx;
                  color: #FFFFFF;
                  text-align: center;
                  line-height: 48rpx;
                  margin-left: 12rpx;
                }

                .box3 {
                  width: 128rpx;
                  height: 48rpx;
                  background: #FFE5CE;
                  border-radius: 8rpx;
                  font-weight: 500;
                  font-size: 20rpx;
                  color: #976029;
                  text-align: center;
                  line-height: 48rpx;
                  margin-left: 12rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}


::v-deep .uni-navbar__header-btns-right {
  display: none !important;
}

.flex-box {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .flex-left {
    font-size: 32rpx;
    color: #976029;
  }

  .flex-right {
    width: 52rpx;
    height: 52rpx;
    border-radius: 8rpx;
    border: 1rpx solid #E0E0E0;
    font-weight: 400;
    font-size: 28rpx;
    color: #2D2D2D;
    text-align: center;
    line-height: 52rpx;
  }
}
</style>
